import {Image, StyleSheet, Platform, View, Text, Pressable, TouchableOpacity} from 'react-native';
import PageScrollView from '@/components/PageScrollView';
import React, {useState} from "react";
import {Link, useRouter} from "expo-router";
import {Flex} from "@ant-design/react-native";
import {LinearGradient} from "expo-linear-gradient";
import PageTopDeliver from "@/components/PageTopDeliver";
import FormTitle from "@/components/FormTitle";


export default function HomeScreen() {
  const router = useRouter();
  const [menuList, setMenuList] = useState([
    {
      pathName: 'localWriting',
      title: '本地成片',
      icon: require('@/assets/images/index/ai_icon1.png'),
      iconW: 28,
      iconH: 28
    }, {
      pathName: 'videoAndPictrue',
      title: '文生视频',
      icon: require('@/assets/images/index/ai_icon5.png'),
      iconW: 28,
      iconH: 28
    }, {
      pathName: 'videoAndPictrue',
      title: '文生图片',
      icon: require('@/assets/images/index/ai_icon6.png'),
      iconW: 28,
      iconH: 28
    }
  ])

  return (
    <PageScrollView
      isHaveHeader
      isTransparentTab
      pageTab={
        <PageTopDeliver />
      }
    >

      <TouchableOpacity onPress={() => router.push('/videoPublish')}>
        <LinearGradient 
          style={{height: 80, borderRadius: 8}}
          colors={['rgba(105, 137, 255, 0.2)', 'rgba(198, 94, 253, 0.2)']}
          start={{x: 0, y: 0}}
          end={{x: 1, y: 1}}
        >
          <Flex justify='center' style={{flex: 1}}>
            <Image style={{width: 40}} source={require('@/assets/images/index/ai_video.png')} resizeMode={'contain'}></Image>
            <Text style={{fontSize: 17, marginLeft: 5}}>视频发布</Text>
          </Flex>
        </LinearGradient>
      </TouchableOpacity>

      <View style={styles.container}>
        {menuList?.map((item, index) => (
          <Pressable key={index} style={styles.item} onPress={() => router.navigate(`/${item.pathName}`)}>
            <Image style={{width: item.iconW, height: item.iconH}} resizeMode={"contain"} source={item.icon}></Image>
            <Text style={styles.name}>{item.title}</Text>
          </Pressable>
        ))}
      </View>

      <FormTitle 
        title='我的作品' 
        isLeftIcon 
        right={
          <TouchableOpacity style={{flexDirection: 'row',alignItems:'center'}}>
            <Text style={{color: 'rgba(0, 0, 0, 0.3)'}}>全部</Text>
            <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.3)'}}>&#xe609;</Text>
          </TouchableOpacity>
        }
      />
    </PageScrollView>
  );
}

const styles = StyleSheet.create({
  card_wrap: {
    flexDirection: 'row',
    marginTop: 4,
  },
  container: {
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row",
    marginTop: 8,
    backgroundColor: 'rgba(255,255,255,0.5)',
    borderRadius: 8,
    paddingVertical: 4
  },
  item: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    width: "33.33%",
    paddingVertical: 12
  },
  name: {
    fontSize: 12,
    color: 'rgba(0,0,0,0.9)',
    lineHeight: 18,
    marginTop: 8
  }
});
